<template>
  <div class="step-warp flex">
    <div class="step-left">
      <SettingInput class="step-item" :title="'Project Name'" placeholder="" :height="50"/>
      <div class="step-item">
        <p>OS</p>
        <n-radio-group v-model:value="os">
          <n-radio :checked="os === 'Ubuntu20.04'" value="Ubuntu20.04" @change="e => os = e.target.value" class="radio">
            Ubuntu20.04
          </n-radio>
          <n-radio :checked="os === 'CentOS 8'" value="CentOS 8" @change="e => os = e.target.value"  class="radio">
            CentOS 8
          </n-radio>
        </n-radio-group>
      </div>
      <div class="step-item">
        <p>Shell</p>
        <n-radio-group v-model:value="shell">
          <n-radio-button value="ZSH">
            ZSH
          </n-radio-button>
          <n-radio-button  value="Bash">
            Bash
          </n-radio-button>
        </n-radio-group>
      </div>
      <SettingInput class="step-item" :title="'Language'" placeholder="e.g. python3" :height="50"/>
    </div>
    <div class="step-right">
      <div class="step-item">
        <p>Python/Condo Packages</p>
        <div class="upload flex">
          <span>-use File:</span>
          <n-upload>
            <n-button>上传文件</n-button>
          </n-upload>
        </div>
        <div class="packages">
          <div class="packages-title">
            <span>Name</span>
            <span>Version(optional)</span>
          </div>
          <n-dynamic-input
              v-model:value="packages"
              preset="pair"
              key-placeholder="Name"
              value-placeholder="Version(optional)"
          />
        </div>
      </div>
      <SettingInput class="step-item" :title="'Apt Packages'" placeholder="" :height="50"/>
    </div>
  </div>
</template>

<script setup>
import { NRadio, NRadioButton, NRadioGroup, NUpload, NButton, NDynamicInput } from 'naive-ui'
import {ref} from "vue";
import SettingInput from '@/components/fsConfig/SettingInput'

let os = ref(null)
let shell = ref(null)
let packages = ref(null)
</script>

<style scoped>
.flex {
  display: flex;
  align-items: flex-start;
}
.step-warp {
  width: 70vw;
  justify-content: space-between;
}
.step-warp p{
  font-size: var(--settingTitleFontSize);
  margin-bottom: 10px;
}
.step-left {
  min-width: 40%;
}
.step-item {
  margin-bottom: 40px;
}
.radio {
  font-size: 20px;
}
.upload span {
  width: 150px;
  font-size: 20px;
}
.packages-title {
  padding-bottom: 10px;
}
.packages-title span {
  padding: 0 70px;
}
.packages {
  width: 500px;
  border: 1px solid rgb(224,224,230);
  padding: 30px;
  border-radius: 10px;
  margin-top: 10px;
}
</style>
